﻿function draw_grid(ctx) {
    var screen_w = 375;                                 //画布宽度
    var screen_h = 150;
    var width = 25;
    var w_len = screen_w / width;
    var h_len = screen_h / width;
    for (var i = 0; i <= h_len; i++) {
        ctx.moveTo(0, i * width);
        ctx.lineTo(screen_w, i * width);
    }

    for (var i = 0; i <= w_len; i++) {
        ctx.moveTo(i * width, 0);
        ctx.lineTo(i * width, screen_h);
    }

    ctx.setLineWidth(1);
    ctx.setFillStyle('#1ee145');
    ctx.draw(); //绘制图形
}

function draw_line(ctx, cur_x, cur_y, point_x, angle,dis) {
    if (cur_x >= point_x) {//开始下一个随机点
        console.log("cur_x=", cur_x, "cur_y=", cur_y);
        ctx.draw(); //绘制图形
        angle = Math.round(Math.random() * 2);
        switch (angle) {
            case 0://上
                angle = 30;
                break;
            case 1://水平
                angle = 0;
                break;
            case 2://下
                angle = -30;
                break;
        }
        dis = Math.round(Math.random() * 30 + 10);
        point_x = cur_x + dis;
    } else {
        switch (angle) {
            case 30://上
                if (cur_x < point_x - dis / 2) {
                    cur_y -= parseInt((dis - (point_x - cur_x)) * Math.tan(angle * Math.PI / 180));
                } else {
                    cur_y += parseInt(((point_x - cur_x)) * Math.tan(angle * Math.PI / 180));
                }
                //body.appendChild(createCircle(cur_x, cur_y));
                ctx.lineTo(point_x, cur_y);                
                cur_x += 0.5;
                break;
            case 0://水平
                //body.appendChild(createCircle(cur_x, cur_y));
                ctx.lineTo(point_x, cur_y);
                cur_x += 3;
                break;
            case -30://下
                if (cur_x < point_x - dis / 2) {
                    cur_y -= parseInt((dis - (point_x - cur_x)) * Math.tan(angle * Math.PI / 180));
                } else {
                    cur_y += parseInt(((point_x - cur_x)) * Math.tan(angle * Math.PI / 180));
                }
                //body.appendChild(createCircle(cur_x, cur_y));
                ctx.lineTo(point_x, cur_y);
                cur_x += 0.5;
                break;
        }
    }

}



var page = {

    timer: 0,

    /* 此方法在第一次显示窗体前发生 */
    onLoad: function (event) {
        var ctx = pm.createCanvasContext('Canvas1', this);
        var ctx2 = pm.createCanvasContext('Canvas2', this)
        draw_grid(ctx);



        ctx2.setLineWidth(2);
        ctx2.setFillStyle('red');

        var screen_w = 375;                                 //画布宽度
        var screen_h = 150;
        var width = 25;

        var cur_x = 0;//初始水平坐标
        var cur_y = screen_h / 2;//初始垂直坐标

        var unit_x = width;//固定水平单元距离
        var unit_y = width;//最大垂直单元距离
        var angle = 0;//角度
        var dis = 0;//随机水平距离
        var point_x = cur_x + dis;//目标位置
        var that = this;
        this.timer = setInterval(function () {
            draw_line(ctx, cur_x, cur_y, point_x, angle,dis);
        }, 15);
        //draw_line(ctx2);
    },

    /* 此方法展示窗体后发生 */
    onResume: function (event) {

    },

    /* 当前页状态变化为显示时触发 */
    onShow: function (event) {

    },

    /* 当前页状态变化为隐藏时触发 */
    onHide: function (event) {

    },

    /* 此方法关闭窗体前发生 */
    onExit: function (event) {
        clearInterval(this.timer);
    },

    onClick: function (event) {
        pm.navigateBack();
    },
};

Page(page);

page = 0;
